<template>
  <div>
    <!-- 饼图 -->
    <div style="width: 100%; height: 100%;" id="barChart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    // this.chart();
  },
  methods: {
    chart() {
      //初始化
      var myCharts = this.$echarts.init(document.getElementById("barChart"));
      // 数据
      var pieData = [
        { name: "原材料问题", value: 2 },
        { name: "维护保养问题", value: 6 },
        { name: "人员技能与管理", value: 2 },
        { name: "设备能力不足", value: 1 },
        { name: "工装设计问题（非模具）", value: 1 }
      ];
      // 配置项
      var option = {
        //标题
        title: {
          text: "客户投诉发生原因分类",
          textStyle: {
            //文本样式
            color: "#fff",
            fontWeight: "600"
          },
          left: "30%", //位置
          top: 0
        },
        //系列列表
        series: [
          {
            type: "pie", //类型：bar：柱状图，line：折线图，pie：饼装图
            data: pieData,
            color: ["#558DD1", "#D3534F", "#A7CC5B", "#8B6BB2", "#53BEDA"],
            //显示数值
            label: {
              show: true, //设置显示
              formatter: function(arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.name + ":\n" + arg.percent + "%";
              }
            },
            //线条颜色
            // labelLine : {
            // 	lineStyle : 'red',
            // },
            top: 45,
            left: "-10%"
          }
        ],
        //菜单位置
        legend: {
          orient: "vertical",
          //   left: "center",
          //   bottom: "bottom",
          right: 20,
          y: "center",
          textStyle: {
            color: "#9FE6B8",
            fontSize: 14
          }
        },
        //提示配置
        tooltip: {
          trigger: "item" //触发类型：放在图上
          //   trigger: "axis", //触发类型：放在坐标轴上
          //   triggerOn: "click", //触发方式：click：点击，mouseover：鼠标移入(默认)
          //   formatter: function (arg) {
          // 	  console.log(arg)
          //     //通过回调函数动态显示文字内容,percent:所占百分比
          //     return arg.name + ":\n" + arg.percent + "%";
          //   },
          //   position: "right", //位置
          //   formatter: "{b}:{d}%",
          //   trigger: "axis1",
          //   axisPointer: {
          //     type: "cross",
          //   },
        }
      };
      myCharts.setOption(option);
      // window.onresize = myCharts.resize;
      window.addEventListener("resize", myCharts.resize);
    }
  }
};
</script>

<style scoped>
</style>
